<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>系统配置</title>
    [#include "/admin/common/commons.html"]
    [#include "/tenant/common/site.html"]
    [#include "/tenant/admin/system/componentSystemShow.html"]
    [#include "/tenant/admin/system/componentSystemSetting.html"]

    [@baseHead /]
    <script type="text/javascript"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=PYWBZ-QHE3I-L7WGT-5THCC-KOPH7-Y6FSC"></script>
</head>

<body class="hold-transition skin-blue sidebar-mini">
    <!-- Site wrapper -->
    <div class="wrapper">

        <header class="main-header">
            <!-- Header Navbar: style can be found in header.less -->
            [#include "/admin/common/nav.html"]
        </header>

        <!-- =============================================== -->

        <!-- Left side column. contains the sidebar -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                [@user_panel /]
                <!-- search form -->
                [@sidebar_form /]
                <!-- /.search form -->
                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu" data-widget="tree">
                    <li class="header">主面板</li>
                    [@menustag id=1]
                    [#list list as item]
                    [@menu item "1,2,48"]
                    [/@menu]
                    [/#list]
                    [/@menustag]
                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>

        <!-- =============================================== -->

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper" id="app" v-cloak>
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <!-- 导航 -->
                <div class="navigation">
                    <i>首页</i> <span>系统信息</span>
                </div>
            </section>
            <!-- Main content -->
            <section class="content ">
                <el-row class="model-form">
                    <el-col :span="4" >
                        <el-menu style="min-height: 850px;" :default-active="activeIndex" @select="handleSelect">
                            <el-menu-item index="1">
                                <i class="el-icon-menu"></i>
                                <span slot="title">基本信息</span>
                            </el-menu-item>
                            <el-menu-item index="2">
                                <i class="el-icon-document"></i>
                                <span slot="title">基本设置</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="20">
                        <keep-alive>
                            <router-view v-if="$route.meta.keepAlive">
                            </router-view>
                        </keep-alive>
                        <router-view v-if="!$route.meta.keepAlive">
                        </router-view>
                    </el-col>
                </el-row>
                <!-- Default box -->
            </section>


            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->

        [#include "/admin/common/footer.html"]

        <!-- Control Sidebar -->
        [#include "/admin/common/aside.html"]

        <!-- /.control-sidebar -->
        <!-- Add the sidebar's background. This div must be placed
     immediately after the control sidebar -->
        <div class="control-sidebar-bg"></div>
    </div>
    <!-- ./wrapper -->
    [@baseScript /]
    [#include "/tenant/common/component.html" /]
    [@nbSelect /]
    [@avatar /]
    [@nbMap /]

    <script type="text/javascript">
        var config = {};

        config.methods = {};

        [@configBasicVue /]

        config.methods.goBack = function () {
            this.$router.go(-1);
        }
        config.basicMethod = function () {
            var result = {};
            result.postData = config.methods.postData;
            result.postJsonData = config.methods.postJsonData;
            result.goBack = config.methods.goBack;
            return result;
        }

        config.methods.loadProductCatalogOptions = function () {
            var self = this;
            var param = {};
            param.sortMethod = "asc";
            param.sortField = "id";
            param.level = 1;
            param.size = 500;
            param.fetch = 1;
            $.post("${siteurl}tenantRest/productcatalog/list.htm", param, function (result) {
                if (result.code == 0) {
                    self.$store.commit('updateProductCatalogOptions', result.list);
                }
            });
        }


    </script>



    [@systemShowConfig /]
    [@settingShowConfig /]

    <script type="text/javascript">

        // 3. 创建 router 实例，然后传 `routes` 配置
        // 你还可以传别的配置参数, 不过先这么简单着吧。
        var appConfig = {};
        appConfig.el = "#app";


        const routes = [
            { path: '/setting', component: settingShowConfig, props: true },
            { path: '/index', component: systemShowView, props: true },
            {
                path: '/', component: systemShowView, props: true, meta: {
                    keepAlive: true, //此组件不需要被缓存
                }
            }
        ]



        const router = new VueRouter({
            routes: routes // (缩写) 相当于 routes: routes
        })

        var store = new Vuex.Store({
            state: {
                count: 0,
                productCatalogOptions: [],
            },
            mutations: {
                increment: function (state) {
                    state.count++
                },
                updateProductCatalogOptions: function (state, obj) {
                    state.productCatalogOptions = obj;
                },

            }
        })

        appConfig.router = router;
        appConfig.data = function () {
            return {
                viewModel: {
                },
                activeIndex: "1"
            }
        };
        appConfig.store = store;
        appConfig.methods = config.methods;
        appConfig.mounted = function () {
            var activeIndex = this.$route.query.activeIndex;
            if (activeIndex) {
                this.activeIndex = activeIndex;
                console.info(activeIndex)
            }
        }
        appConfig.methods.handleSelect = function (event) {
            this.selectIndex = event;
            if (event == "1") {
                this.$router.replace({ path: '/index', query: { activeIndex: 1, time: Math.random() } })
            }
            else if (event == "2") {
                this.$router.replace({ path: '/setting', query: { activeIndex: 2, time: Math.random() } })
            } else {

            }
        }
        var vm = new Vue(appConfig);

    </script>

</body>

</html>